<template>
    <div class="pay-auth">
        <div class="pay-auth-main">
            <div class="main-title">{{ mainTitle }}</div>
            <div class="sub-title">
                基于系统风控、用户资金安全方面的考虑，微信支付和支付宝加强对商户的风险管理，商户需要在入网后完成开户意愿确认，确保商户主体名称不被冒用。
            </div>
            <div class="code-title">{{ codeTitle }}</div>
            <div class="code-sub-title">{{ codeSubTitle }}</div>
            <div class="code-image">
                <el-image :src="qr_code" fit="fill"></el-image>
                <div class="refresh-status">
                    <el-button
                        class="refresh-status-button"
                        :loading="loading"
                        :style="{ '--status-bgcolor': statusColor }">
                        <img v-if="!loading" :src="statusSrc" />{{ loading ? '刷新中' : statusName }}
                    </el-button>
                    <span class="refresh-status-text" @click="getData"
                        ><img
                            src="https://img.static-keyid.cn/toolspace/scrm/2023/10/1697193540557v2vs2bnlenosqmb7.png" />刷新认证状态</span
                    >
                </div>
            </div>
        </div>
        <div class="pay-auth-footer">
            <el-button type="primary" @click="handleGoBack">返回列表</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import request from '@/request/index';
import { setLayout, resetLayout } from '@/hooks/layout';

const route = useRoute();
const router = useRouter();

// 主标题
const mainTitleList = reactive({
    // 1: '微信支付认证',
    2: '微信支付认证',
    3: '支付宝认证'
    // 5: '支付宝认证'
});
const mainTitle = computed(() => {
    return (route.query.isp_code_name || '') + '账户商家' + (mainTitleList[route.query.merchant_no_type] || '');
});
// 二维码标题类型名称
const codeName = computed(() => {
    let codeName = '支付宝';
    if (mainTitle.value.includes('微信')) {
        codeName = '微信';
    }
    return codeName;
});
// 二维码标题名称
const codeTitle = computed(() => {
    return `${codeName.value}支付商户认证`;
});
// 二维码子标题名称
const codeSubTitle = computed(() => {
    return `请使用法人/联系人${codeName.value}扫描下方二维码`;
});

// 图标列表
const imgList = {
    1: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697194353007fpsqg1vs8llp8gnr.png',
    2: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697193540566b959drrphotk9xef.png'
};
// 按钮状态图标
const statusSrc = computed(() => {
    // 70-未认证 80-已认证
    return status.value == 80 ? imgList[2] : imgList[1];
});
// 按钮状态名称
const statusName = computed(() => {
    return status.value == 80 ? '已认证' : '未认证';
});
// 按钮状态颜色
const statusColor = computed(() => {
    return status.value == 80 ? '#60b900' : '#cccccc';
});

// 获取认证二维码和状态
let qr_code = ref(); // 二维码
let status = ref(); // 状态
let loading = ref(false);
const getData = async () => {
    loading.value = true;
    const { isp_code, merchant_no_type, open_no, merchant_no } = route.query;
    const { data } = await request('accountManageRefreshAtStatus', {
        isp_code,
        merchant_no_type,
        open_no,
        merchant_no
    });
    // merchant_no_type 2微信、3支付宝，支付宝直接返回的是图片地址，微信是base64码
    qr_code.value = `${merchant_no_type == 3 ? '' : 'data:image/jpg;base64,'}${data?.qr_code}`;
    status.value = data?.status;
    loading.value = false;
};
getData();

// 返回上一页
const handleGoBack = () => {
    router.go(-1);
};

onMounted(() => {
    setLayout('pay-auth-layout');
});
onUnmounted(() => {
    resetLayout('pay-auth-layout');
});
</script>
<style>
.pay-auth-layout {
    height: calc(100vh - 168px);
}
</style>
<style lang="scss" scoped>
@import './scss/index.scss';
</style>
